<template>
	<view class="">
		<u-navbar class="font-weight-bold" title="商品分类" placeholder>
			<view slot="left"></view>
		</u-navbar>
		<view class="mt-2 flex" style="background: #F9F9F9;">
			<view style="width: 170rpx;">
				<view class="flex align-center justify-center p-2"
					:class="index===leftSelectIndex?'class-active':'class-inactive'" v-for="(item,index) in leftlist"
					:key="index" @click="leftChange(item,index)" style="width: 130rpx;">
					<view :class="index===leftSelectIndex?'titlt-active':'titlt-inactive'" class="flex-column font-30 textStyle">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="ml-1  flex-1" >
				<template v-if="goodslist.length">
					<view class="flex bg-white p-2 border-bottom" v-for="(item,index) in goodslist" :key="index"
						@click.stop="detail(item)">
						<u-image :src="item.image" width="70" height="70"></u-image>
						<view class="ml-2" style="width: 370rpx;">
							<u-text class="font-30" :text="item.goods_name" lines="2"></u-text>
							<view class="mt-5">
								<view class="flex justify-between" style="color: #bbbbbb;">
									<view class="flex align-end">
										<commonPrice :price="item.goods_price" ></commonPrice>
										<view class="font-24 ml-1" style="text-decoration: line-through;">￥{{item.line_price}}</view>
									</view>
									<view class="flex align-end font-24">
										<text class="mr-1">月销</text>
										{{item.sales}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle: {
					fontSize: '10rpx'
				},
				selectIndex: 0,
				leftSelectIndex: 0,
				leftlist:[],
				goodslist:[],
				page: 1, // 页码
				limit: 10 ,// 每页条数
				isFinish: true,
				cate_id: '',
				user_info:{
					'invite_code':''
				}
			}
		},
		onShow() {
			uni.hideLoading()
			let user_info = uni.getStorageSync('userinfo')
			if(user_info){
				this.user_info = user_info
			}
		},
		onLoad(options) {
			this.getData()
			let invite_code = '';
			if(options && options.invite_code){
				invite_code = options.invite_code
			}
			//获取来源
			if(options && options.scene){
				//params转 obj  字符串参数  a=123&b=456 转 {a:"123",b:"456"}
				var query = this.getRequestParameters(decodeURIComponent(options.scene))
				invite_code = query.invite_code
			}
			if(invite_code){
				uni.setStorageSync('invite_code', invite_code)
			}
		},
		//转发给朋友
		onShareAppMessage(res){
			return {
				title:'五金',
				path:'pages/classify/index?invite_code='+this.user_info.invite_code
			}
		},
		//分享朋友圈
		onShareTimeline(res){
			return {
				title:'五金',
				path:'pages/classify/index',
				query:'invite_code='+this.user_info.invite_code,
			}
		},
		onReachBottom() {
			if (!this.isFinish) return
			this.page = this.page + 1
			this.$api.classifiedGoods({
				page:this.page,
				cate_id:cateId || this.cate_id,
				limit: this.limit
			}).then(res => {
				if (res.code === 1) {
					this.goodslist = [...this.goodslist, ...res.data]
					if (res.data.length <= this.limit) {
						this.isFinish = false
					}
				}
			})
		},
		methods: {
			getRequestParameters(params="") {
                let theRequest = new Object();
                if (params != undefined) {
                    let strs = params.split("&");
                    for (let i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
			getData(){
				this.$api.categoryIndex().then(res=>{
					if(res.code === 1){
						this.leftlist = res.data
						if(res.data){
							this.cate_id = res.data[0].id
							this.getGoodsList(res.data[0].id)
						}
					}
				})
			},
			getGoodsList(cateId){
				let parmar = {
					cate_id: cateId || this.cate_id,
					page: this.page,
					limit: this.limit
				}
				this.$api.classifiedGoods(parmar).then(res=>{
					if(res.code === 1){
						this.goodslist = res.data
					}
				})
			},
		
			
			leftChange(item,index){
				this.leftSelectIndex = index
				this.getGoodsList(item.id)
			},
			detail(item){
				uni.$u.route('pages/index/detail',{
					 goodsId:item.goods_id
				})
			}

		}
	}
</script>

<style lang="scss">
	.class-inactive {
		background: #f6f6f6;
	}
	
	.class-active {
		background: #ffffff;
	}
	
	.titlt-inactive {
		color: #666666;
	}
	
	.titlt-active {
		color: #04BF79;
	}
	.active {
		// display: block;
		width: 50rpx;
		border-bottom: 10rpx solid #89bf8b;
		margin-left: 22rpx;
	}
	.textStyle {
		overflow:hidden; 
		text-overflow:ellipsis;
		white-space:nowrap;
	}
</style>
